import React, {Component} from 'react';
import {Avatar} from 'antd';
import u397 from '../../stylesheets/images/u397.png';
import map from '../../stylesheets/images/map.png';
import {Form, Input, Button, message, Icon} from "antd";

class Concat extends Component {
    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                // message.success('Received values of form: ', values.DISCIPLINE);
                message.info(`Click on item ${values.DISCIPLINE}`);
                console.log(values);
            }
        });
    };

    render() {
        const { TextArea } = Input;
        // const Option = Select.Option;
        const {getFieldDecorator} = this.props.form;

        return (
            <div className="concat-set">
                <div className="education-set row">
                    <div className="text-center">
                        <h2>联系我们</h2>
                        <div className="welding-set-gutter-line">
                            <hr/>
                            <span/>
                            <hr/>
                        </div>
                        <h3>CONTACT US</h3></div>
                </div>
                <div className="clearfix mrt20">
                    <div className="col-md-6">
                        <h3 className="mrb30 color1">上海市焊接行业协会</h3>
                        <h4><b>地址：</b>上海市闸北区中兴路960号6楼402室</h4>
                        <h4><b>邮编：</b>200070</h4>
                        <h4><b>电话：</b>(021)56308667</h4>
                        <h4><b>传真：</b>(021)56302638</h4>
                        <h4><b>E-mail：</b>shweld@163.com</h4>
                    </div>
                    <div className="col-md-6" style={{paddingTop: "4%"}}>
                        <Avatar shape="square" src={u397} size={160} icon="user"/>
                        <h4 className="attention mrb10">关注我们</h4>
                    </div>
                </div>
                <div className="mrt20 text-center">
                    <img src={map} alt="" width="100%"/>
                </div>

                <div className="clearfix association-education row pdb20">
                    <div className="col-lg-4 col-md-3 col-sm-2"/>
                    <div className="col-lg-4 col-md-6 col-sm-8">
                        <h2 className="text-center color1 mrt30">在线留言</h2>
                        <Form onSubmit={this.handleSubmit} className="mrt30">
                            <Form.Item>
                                {
                                    getFieldDecorator('COMPANY', {
                                        initialValue: '',
                                        rules: [
                                            {
                                                required: true,
                                                message: '企业名称'
                                            },
                                            // {
                                            //     min: 5, max: 10,
                                            //     message: '长度不在范围内'
                                            // },
                                            // {
                                            //     pattern: new RegExp('^\\w+$', 'g'),
                                            //     message: '用户名必须为字母或者数字'
                                            // }
                                        ]
                                    })(<Input size={"large"} prefix={<Icon type="shop" style={{fontSize:"16px"}}/>} placeholder="企业名称"/>)
                                }
                            </Form.Item>
                            <Form.Item>
                                {
                                    getFieldDecorator('NAME', {
                                        initialValue: '',
                                        rules: [
                                            {
                                                required: true,
                                                message: '联系人'
                                            },
                                            // {
                                            //     min: 5, max: 10,
                                            //     message: '长度不在范围内'
                                            // },
                                            // {
                                            //     pattern: new RegExp('^\\w+$', 'g'),
                                            //     message: '用户名必须为字母或者数字'
                                            // }
                                        ]
                                    })(<Input size={"large"}  prefix={<Icon type="user" style={{fontSize:"16px"}}/>} placeholder="联系人"/>)
                                }
                            </Form.Item>
                            <Form.Item>
                                {
                                    getFieldDecorator('PHONE', {
                                        initialValue: '',
                                        rules: [{
                                            required: true,
                                            message: '手机号码不能为空'
                                        },]
                                    })(<Input size={"large"}  prefix={<Icon type="phone" style={{fontSize:"16px"}}/>} placeholder="请输入考试报名手机号码"/>)
                                }
                            </Form.Item>
                            <Form.Item>
                                {
                                    getFieldDecorator('TEXT', {
                                        initialValue: '',
                                        rules: [{
                                            required: true,
                                            message: '留言内容'
                                        },]
                                    })( <TextArea placeholder="留言内容" autosize={{ minRows: 6, maxRows: 6 }} />)
                                }
                            </Form.Item>
                            <Form.Item>
                                <Button size={"large"} style={{width: "100%"}} type="primary" htmlType="submit"
                                        className="">
                                    确认提交
                                </Button>
                            </Form.Item>
                        </Form>
                    </div>
                </div>
            </div>
        );
    }
}

export default Form.create()(Concat);